<template>
  <div class="padding-l-20 padding-r-20 padding-t-20">
    <opt-bar>
      <template slot="left-bar"> 资源管理 </template>
      <template slot="right-bar">
        <a-button @click="edit(0, { pid: 0 })" class="nbcs-btn-main-bg" style="top: -1.6px">新增资源 </a-button>
      </template>
    </opt-bar>
    <el-table border :data="list" style="width: 100%" row-key="id" lazy ref="tableDom" v-loading="loading" :load="load" :tree-props="{ children: 'children', hasChildren: 'id' }">
      <el-table-column prop="name" width="220" label="菜单名称"> </el-table-column>
      <el-table-column prop="icon" label="图标">
        <template slot-scope="scope">
          <i v-if="scope.row.icon.includes('icon-')" class="iconfont" :class="scope.row.icon" />
          <a-icon v-else :type="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="sortNo" label="排序"></el-table-column>
      <el-table-column prop="path" width="160" label="路由标识"> </el-table-column>
      <el-table-column prop="perms" width="220" label="权限标识"> </el-table-column>
      <el-table-column prop="enabled" label="状态">
        <template slot-scope="scope">
          <a-tag v-if="scope.row.enabled" class="tag-green">正常</a-tag>
          <a-tag v-else class="tag-red">禁用</a-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <a-space size="middle">
            <a @click="edit(0, { pid: scope.row.id })" v-if="permissionsList.add">新增</a>
            <a @click="edit(1, { row: scope.row })" v-if="permissionsList.edit">编辑</a>
            <a-popconfirm title="确定删除该菜单项?" @confirm="del(scope.row)"  v-if="permissionsList.delete">
              <a class="table-red-btn">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </el-table-column>
    </el-table>
    <resource-form @getList="getNewList"></resource-form>
  </div>
</template>

<script>
import OptBar from '@/layouts/OptBar';

// eslint-disable-next-line no-unused-vars
import { list, del } from '@/services/menu';
import resourceForm from './resourceForm';
import { mapGetters } from 'vuex';

export default {
  name: 'Resource',
  components: { OptBar, resourceForm },
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        organization: '',
        groupId: '',
      },
      list: [],
      id: '0',
      maps: new Map(),
      permissionsList: {
        add: false,
        edit: false,
      },
      oldPid: 0,
    };
  },
  computed: {
    ...mapGetters('account', ['permissions']),
  },
  created() {
    this.getList({ id: this.id });
    for (let i in this.permissions) {
      if (this.permissions[i]['operation'].indexOf('sys:resource:add') != -1) {
        this.permissionsList.add = true;
      }
      if (this.permissions[i]['operation'].indexOf('sys:resource:edit') != -1) {
        this.permissionsList.edit = true;
      }
        if (this.permissions[i]['operation'].indexOf('sys:resource:delete') != -1) {
            this.permissionsList.delete = true;
        }
    }
  },
  methods: {
    //获取列表
    getList(params) {
      this.loading = true;
      list(params)
        .then((res) => {
          this.loading = false;
          if (res.data.code == 0) {
            this.list = res.data.data;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    edit(action, data = {}) {
      this.$bus.$emit('resourceVisible', {
        state: true,
        action: action,
        data: data,
      });
    },
    del(obj) {
      del({ id: obj.id }).then((res) => {
        if (res.data.code === 0) {
          this.$message.success('删除成功');
          if (obj.pid != '0') {
            const { tree, treeNode, resolve } = this.maps.get(obj.pid); //根据父级id取出对应的节点数据
            this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, tree.id, []);
            //实现数据的重新加载
            this.load(tree, treeNode, resolve);
          } else {
            this.getList({ id: this.id });
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    load(tree, treeNode, resolve) {
      this.maps.set(tree.id, { tree, treeNode, resolve });
      list({ id: tree.id }).then((res) => {
        if (res.data.code == 0) {
          resolve(res.data.data);
        }
      });
    },
    //刷新数据
    getNewList(data) {
      //编辑可能移动上级组织，刷新原上级组织树
      if (data.isEdit) {
        const { tree, treeNode, resolve } = this.maps.get(this.oldPid);
        this.load(tree, treeNode, resolve);
      }
      //懒加载刷新当前级
      const currentId = data.data.id;
      if (currentId && this.maps.get(currentId)) {
        const { tree, treeNode, resolve } = this.maps.get(currentId);
        this.load(tree, treeNode, resolve);
      }
      //懒加载刷新父级
      const parentId = data.data.pid;
      if (parentId && this.maps.get(parentId)) {
        const { tree, treeNode, resolve } = this.maps.get(parentId);
        console.log(this.maps.get(parentId));
        this.load(tree, treeNode, resolve);
      }
      //刷新根节点
      if (!this.maps.get(parentId) && !this.maps.get(currentId)) {
        this.getList({ id: this.id });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.select {
  width: 150px;

  /deep/ .ant-select-selection {
    width: 100%;
  }
}

._input {
  width: 160px;
}

.cell i {
  font-size: 16px;
}
</style>
